<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const data = reactive({
  mobile: "", // 手机号
  checked: false,
});
// 退出登录

const BackLogin = () => {
  localStorage.removeItem("avatar"); // 存本地的图像
  localStorage.removeItem("token"); // 存本地的token
  localStorage.removeItem("user_nickname"); // 存本地的名字
  localStorage.removeItem("mobile"); // 存本地的手机号
  router.push("/login");
};
const mobile = localStorage.getItem("mobile"); // 本地获取手机号
data.mobile = mobile;
</script>
<template>
  <div class="sz">
    <header>
      <van-icon name="arrow-left" @click="$router.back()" />
      <h3>设置</h3>
    </header>
    <div class="box">
      <div class="box1">
        <p>更改绑定手机号</p>
        <div class="div1">
          <span>{{ data.mobile }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="box1">
        <p>设置密码</p>
        <div class="div1">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="box1">
        <p>关于我们</p>
        <div class="div1">
          <span>{{ data.mobile }}</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="box1">
        <p>上课短信通知</p>
        <div class="div1">
          <span>{{ data.mobile }}</span>
          <van-switch
            v-model="data.checked"
            size="24px"
            active-color="orangered"
          />
        </div>
      </div>
    </div>
    <!-- 退出登录 -->
    <p class="goLogin">
      <button @click="BackLogin">退出登录</button>
    </p>
  </div>
</template>
<style lang="scss" scoped>
.sz {
  header {
    height: 88px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    .van-icon {
      width: 60px;
      height: 60px;
      text-align: center;
    }
    h3 {
      flex: 1;
      text-align: center;
      font-size: 36px;
    }
  }
  .box {
    padding: 0 20px;
    .box1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      border-bottom: 0.5px solid #eaeaea;
      margin-bottom: 20px;

      p {
        font-size: 32px;
      }
      .div1 {
        margin-top: -20px;
        .van-icon {
          padding-top: 20px;
        }
        span {
          font-size: 32px;
          color: #666;
          position: absolute;
          right: 80px;
          top: 140px;
        }
      }
    }
  }
  .goLogin {
    text-align: center;
    button {
      width: 90%;
      height: 88px;
      border-radius: 0.10667rem;
      border: 0;
      margin-top: 0.6rem;
      font-size: 0.45333rem;
      font-weight: 400;
      color: #f15a24;
      outline: none;
      line-height: 1.2rem;
      border: 1px solid #f15a24;
      background: #fff;
    }
  }
}
</style>
